// START Off Sidebar (right)
nav
  ul.nav
    // START user info
    li
      .item
        .p-lg(style="background-image: url('app/img/offsidebar-bg.jpg')")
          .text-center
            p: img.img-circle.img-thumbnail(src='app/img/user/02.jpg', style="width: 64px; height: 64px", alt="Image")
            p.text-white: strong Alex
    // END user info
    // START list title
    li.p
      small.text-muted ONLINE
    // END list title
    li
      // START User status
      a(href="#").media.p.mt0
        span.pull-right
          span.point.point-success.point-lg
        span.pull-left
          // Contact avatar
          img.media-object.img-circle(src='app/img/user/05.jpg', style="width: 40px; height: 40px", alt="Image")
        // Contact info
        span.media-body
          span.media-heading
            strong.text-white Tommy Sam
            br
            small.text-muted tommy39
      // END User status
      // START User status
      a(href="#").media.p.mt0
        span.pull-right
          span.point.point-success.point-lg
        span.pull-left
          // Contact avatar
          img.media-object.img-circle(src='app/img/user/06.jpg', style="width: 40px; height: 40px", alt="Image")
        // Contact info
        span.media-body
          span.media-heading
            strong.text-white Beverley Pierce
            br
            small.text-muted be40210
      // END User status
      // START User status
      a(href="#").media.p.mt0
        span.pull-right
          span.point.point-danger.point-lg
        span.pull-left
          // Contact avatar
          img.media-object.img-circle(src='app/img/user/07.jpg', style="width: 40px; height: 40px", alt="Image")
        // Contact info
        span.media-body
          span.media-heading
            strong.text-white Victor Long
            br
            small.text-muted longlong
      // END User status
      // START User status
      a(href="#").media.p.mt0
        span.pull-right
          span.point.point-warning.point-lg
        span.pull-left
          // Contact avatar
          img.media-object.img-circle(src='app/img/user/08.jpg', style="width: 40px; height: 40px", alt="Image")
        // Contact info
        span.media-body
          span.media-heading
            strong.text-white Danielle Berry
            br
            small.text-muted hunter49
      // END User status

    // START list title
    li.p
      small.text-muted OFFLINE
    // END list title
    li
      // START User status
      a(href="#").media.p.mt0
        span.pull-right
          span.point.point-lg
        span.pull-left
          // Contact avatar
          img.media-object.img-circle(src='app/img/user/09.jpg', style="width: 40px; height: 40px", alt="Image")
        // Contact info
        span.media-body
          span.media-heading
            strong.text-white Bertha Cooper
            br
            small.text-muted ber123
      // END User status
      // START User status
      a(href="#").media.p.mt0
        span.pull-right
          span.point.point-lg
        span.pull-left
          // Contact avatar
          img.media-object.img-circle(src='app/img/user/10.jpg', style="width: 40px; height: 40px", alt="Image")
        // Contact info
        span.media-body
          span.media-heading
            strong.text-white Anne Curtis
            br
            small.text-muted anni
      // END User status
    li
      // Optional link to list more users
      a(href="#", title="See more contacts").p
        strong: small.text-muted &hellip;

// END Off Sidebar (right)